@import '~antd/es/style/themes/default.less';

.iconGroup {
    span.anticon {
        margin-left: 16px;
        color: @text-color-secondary;
        cursor: pointer;
        transition: color 0.32s;
        &:hover {
            color: @text-color;
        }
    }
}

.rankingList {
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
    li {
        display: flex;
        align-items: center;
        margin-top: 16px;
        zoom: 1;
        &::before,
        &::after {
            display: table;
            content: ' ';
        }
        &::after {
            clear: both;
            height: 0;
            font-size: 0;
            visibility: hidden;
        }
        span {
            color: @text-color;
            font-size: 14px;
            line-height: 22px;
        }
        .rankingItemNumber {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-top: 1.5px;
            margin-right: 16px;
            font-weight: 600;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            background-color: @tag-default-bg;
            border-radius: 20px;
            &.active {
                color: #fff;
                background-color: #314659;
            }
        }
        .rankingItemTitle {
            flex: 1;
            margin-right: 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.salesExtra {
    display: inline-block;
    margin-right: 24px;
    a {
        margin-left: 24px;
        color: @text-color;
        &:hover {
            color: @primary-color;
        }
        &.currentDate {
            color: @primary-color;
        }
    }
}

.salesCard {
    .salesBar {
        padding: 0 0 32px 32px;
    }
    .salesRank {
        padding: 0 32px 32px 72px;
    }
    :global {
        .ant-tabs-bar {
            padding-left: 16px;
            .ant-tabs-nav .ant-tabs-tab {
                padding-top: 16px;
                padding-bottom: 14px;
                line-height: 24px;
            }
        }
        .ant-tabs-extra-content {
            padding-right: 24px;
            line-height: 55px;
        }
        .ant-card-head {
            position: relative;
        }
        .ant-card-head-title {
            align-items: normal;
        }
    }
}

.salesCardExtra {
    height: inherit;
}

.salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
}

.offlineCard {
    :global {
        .ant-tabs-ink-bar {
            bottom: auto;
        }
        .ant-tabs-bar {
            border-bottom: none;
        }
        .ant-tabs-nav-container-scrolling {
            padding-right: 40px;
            padding-left: 40px;
        }
        .ant-tabs-tab-prev-icon::before {
            position: relative;
            left: 6px;
        }
        .ant-tabs-tab-next-icon::before {
            position: relative;
            right: 6px;
        }
        .ant-tabs-tab-active h4 {
            color: @primary-color;
        }
    }
}

.trendText {
    margin-left: 8px;
    color: @heading-color;
}

@media screen and (max-width: @screen-lg) {
    .salesExtra {
        display: none;
    }

    .rankingList {
        li {
            span:first-child {
                margin-right: 8px;
            }
        }
    }
}

@media screen and (max-width: @screen-md) {
    .rankingTitle {
        margin-top: 16px;
    }

    .salesCard .salesBar {
        padding: 16px;
    }
}

@media screen and (max-width: @screen-sm) {
    .salesExtraWrap {
        display: none;
    }

    .salesCard {
        :global {
            .ant-tabs-content {
                padding-top: 30px;
            }
        }
    }
}
